<script setup lang="ts">
import type { ShopItemType } from '@/type/lidare'
import { getGuessLikeList_l } from "@/api/lidare"
import ShopItem from "@/components/shopcart/ShopItem.vue"
import ShopCartItem from "@/components/shopcart/ShopCartItem.vue"
import ShopSettlement from "@/components/shopcart/ShopSettlement.vue"
import { ref, onMounted, nextTick,onActivated } from "vue"
import {useRouter} from "vue-router"
import { storeToRefs } from 'pinia'
import { useCounterStore,useUserInfo } from '@/stores/counter'
const store = useCounterStore();
const { shopcartList } = storeToRefs(store);
const userStore = useUserInfo();
const {isLogin} = storeToRefs(userStore);

const router = useRouter();
const toLogin = ()=>{
  router.push("/login");
}
const loading = ref(false);
const finished = ref(false);
const page = ref(0);
const guessLikeList = ref<Array<ShopItemType>>([]);
onMounted(async () => {
  let res = await getGuessLikeList_l();
  guessLikeList.value = res.data._data.list;
});
const onLoad = async () => {
  page.value++;
  let res = await getGuessLikeList_l(page.value);
  guessLikeList.value = [...guessLikeList.value, ...res.data._data.list];
  nextTick(() => {
    loading.value = false;
  });
}
//编辑状态
const isShowDelete = ref(false);


let scrolllTop = 0;
const shopTarget = ref<HTMLDivElement>();
const scrollEvent = (e:Event)=>{
  let target = e.target as HTMLDivElement;
  scrolllTop = target.scrollTop;
}
onActivated(()=>{
  shopTarget.value!.scrollTop = scrolllTop;
})
</script>
<template>
  <div class="shop-cart" :ref="el=>(shopTarget = el as HTMLDivElement)" @scroll="scrollEvent">
    <header class="header">
      <div class="header-title">购物车</div>
      <div class="right" @click.stop="isShowDelete=!isShowDelete">
        {{ isShowDelete ? '完成':'编辑' }}
      </div>
    </header>
    <div class="nothing" v-if="shopcartList?.length==0">
      <div class="img-box animate__animated animate__bounceInDown animate__slow">
        <img src="@/assets/images/shopcart/1678328261551.png" alt="">
      </div>
      <div class="nothing-text animate__animated animate__bounceInRight animate__slow">{{ isLogin?"暂无数据":"登录查看购物车商品" }}</div>
      <div class="nothing-btn animate__animated animate__bounceInLeft animate__slow" @click.stop="toLogin" v-if="!isLogin">去登陆</div>
      <div class="nothing-btn animate__animated animate__bounceInLeft animate__slow" @click.stop="router.push('/home')" v-else>去逛逛</div>
    </div>
    <div class="shopList" v-else>
      <ShopCartItem  v-for="(item,index) in shopcartList" :key="index" :item="item" :isShowDelete="isShowDelete"/>
    </div>
    <div class="love-like">
      <div class="love-like-header">
        <div class="title">
          <div class="line"></div>
          <div class="info">
            <div class="img-box">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px"
                height="19px">
                <image x="0px" y="0px" width="20px" height="19px"
                  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAMAAACnUt2HAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACxFBMVEX09fj05+v06Oz07fH09Pf07/L07PD07vL06+/08/b08vb/7O7/7fD08fT/9ff/8PL/6u308PT/9fb/6+3+8fL/7vD08vX/6ev08/f14+r08fX04OX16+/05+z06u/2y9X5lKT6Ynr6SWT6RmH5WXH3h5j2v8n21t37coj9SmX7PFn7OVb6NlP5NVL4NFD4NVD5Plf3YHT1wcr3y9P8WHL8Plz7Olj7OFX6N1P6NVL5NFD5M0/4Mk34MUz3MUz3RV31r7v21d39WXT9Plv8O1n8Olf6N1T4MU34MEv3L0r3L0n3RFv1ucL8dYv9P179PVv8O1j7PVr8SmT7QV36NFH5OlX5QFr3NU/3MEr2LUj2LUf1W2/00dj3y9T/Smf9PVz9PFr8R2P9orD+x9D9vMb7boH7ZHj8pbD9sbv7kJ/4RV32L0r2LEf2NU71qrb6lqf+QF//5+r+1tv+0NX/1tr/0tf/ydD7jp33PFX2LEb1LEX1eIn03uT9Z4H+P17+4+f/5ej/3+P/29//1dr/z9X+vMX1K0X1TWP00tn+Tmz9PFv+2uD/4OP9tr/3Q1v2LUb1K0T1Nk/0zNT+TGr8PFv9k6P+ztT6hJT3OVL1NE30y9P9Xnn8Um3+yND9s7z5U2n2MEr2K0T2RVv00Nf7iZz9Plz8PVv7YHj9y9L+vcb5YXX3NlD2Lkj1KkT1bH702+H4vsr/RmP7X3b9vcb+4eX+3+P9usP6Ynb3OFL1nqv9ZX77Olf7O1j7WHD8lqX8maf6W3H4OFP2TWP1yND3v8r+TWr7OVf6OVb6RWD6RV/5N1P5Mk33MEv1oq74r7z9TWj7N1T6NVH4Mk/3O1P2laP3t8P7Ynr8QV74NlH3UGf2oq72z9j3qrj5fI/6VW76QFz6PVn5TGb3cIT3nqz1xc713OP10Nj1ydL1yNL1zdb12d////+DvLEqAAAAH3RSTlMAAAB4IHp4eB4gIICAIPHR4HrxgNGuIOAggHrgHiAepeO5SgAAAAFiS0dE67/dJrgAAAAHdElNRQfnAwkOGSkuEai+AAABb0lEQVQY02NgAAFmeQVFJWUVVTVGFgYYUNfQ1NLW0dXTNzA0YoWKGZuYmplbWFpZ29ja2TuwgYRYHJ2cXVzN3YCC7h6eXt4+7EBBDl8//4DAoGCLkNCw8IjIqOgYTgaW2Lj4hMSk5JTUtPSMzKzsnNw8Dgau/IJ4/yRunsKi4pLSsvKKyqrqGgbe2rr4hHo+foGGxqbmllbvyrb2DgbBzrr4rm4hfuGGHqBgb1//hImTGAQn18VPmSoCEZw2fUZO28xZDIKzgdrnzBUFC86bv6By4aLFDGJL6pYmLFu+QhwouHLV6jWVa9etZ5DYsDE+wWXZps1btm7bviMisn/BTiYGBsldQMHde/bu23/goK1XZOWhw1IMDFxHjia4HDM/fuLkqdNnPCNnnGUCeZ793HmX3eYXLoZccj/jdfmKtAQ4lGSuXrsODhCbGzdvSXNCw4759p279+4/ePjo8RNZCXgoc8o9ffb8xctXslJgLgDnIYnycr6DDwAAAABJRU5ErkJggg==" />
              </svg>
            </div>
            <div class="text">猜你喜欢</div>
          </div>
        </div>
        <div class="more"><span>更多</span><van-icon class="icon" name="arrow" /></div>
      </div>
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="guess-list">
          <ShopItem v-for="(item, index) in guessLikeList" :key="index" :item="item" />
        </div>
      </van-list>
    </div>
    <div class="shop-all animate__animated animate__fadeInUp" v-show="shopcartList?.length>0">
      <ShopSettlement/>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.shop-cart {
  width: 100%;
  font-size: .15rem;
  height: calc(100vh - .5rem);
  background-color: var(--bgc-gray);
  overflow: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  .header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: .5rem;
    background-image: url("/images/plant/1678187437277.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-white);

    >div {
      opacity: .8;
    }

    .header-title {
      flex-grow: 1;
      line-height: .5rem;
      text-align: center;
      font-size: .19rem;
    }

    .right {
      position: absolute;
      right: .1rem;
      top: 0;
      bottom: 0;
      margin: auto 0;
      line-height: .5rem;
    }
  }

  .nothing {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: .8rem;

    .img-box {
      width: .9rem;
      height: .9rem;
    }

    .nothing-text {
      margin-top: .3rem;
      margin-bottom: .2rem;
      color: var(--text-gray2);
      opacity: .6;
    }

    .nothing-btn {
      position: relative;
      width: 1.2rem;
      height: .44rem;
      background-color: var(--bgc-red-deep);
      background-image: linear-gradient(to right, var(--bgc-red), var(--bgc-red-deep), var(--bgc-red));
      color: var(--text-white);
      font-size: .16rem;
      border-radius: .04rem;
      line-height: .44rem;
      text-align: center;
    }
  }
  .shopList{
    width: 100%;
    box-sizing: border-box;
    padding: 0.15rem;
    
  }

  .love-like {
    width: 100%;
    box-sizing: border-box;
    padding: 0 .1rem;
    margin-top: .7rem;

    .love-like-header {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        position: relative;
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .16rem;
        font-weight: bold;

        .line {
          position: absolute;
          width: 1.8rem;
          height: .02rem;
          background-color: rgba($color: #000, $alpha: .1);
          z-index: 0;
        }

        .info {
          position: relative;
          z-index: 1;
          background-color: var(--bgc-gray);
          display: flex;
          align-items: center;
          padding: 0 .2rem;
        }

        .img-box {
          width: .2rem;
          height: .2rem;
        }

        .text {
          margin-left: .04rem;
        }
      }

      .more {
        color: var(--text-gray);
      }
    }

    .guess-list {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-top: .2rem;
    }
  }
  .shop-all{
    position: fixed;
    left: 0;
    bottom: .5rem;
    width: 100%;
    height: .5rem;
    background-color: var(--bgc-white);
  }
}
</style>